import React, { useState, useRef, useEffect } from 'react';
interface ToolbarProps {
  activeType: "image" | "video" | "migration" | "digital" | "action";
  setActiveType: (type: "image" | "video" | "migration" | "digital" | "action") => void;
  selectedFeature: string;
  setSelectedFeature: (feature: string) => void;
  selectedBusiness: string;
  setSelectedBusiness: (business: string) => void;
  onOpenLLM?: () => void;
  onGenerate: () => void;
  isAuthenticated: boolean;
  setShowLoginModal: (show: boolean) => void;
  selectedAtmosphere: string;
  setSelectedAtmosphere: (atmosphere: string) => void;
  isGenerating: boolean;
}
import { useDropdownPosition } from './hooks/useDropdownPosition';

const Toolbar: React.FC<ToolbarProps> = ({
  activeType,
  setActiveType,
  selectedFeature,
  setSelectedFeature,
  selectedBusiness,
  setSelectedBusiness,
  onOpenLLM,
  onGenerate,
  isAuthenticated,
  setShowLoginModal,
  selectedAtmosphere,
  setSelectedAtmosphere,
  isGenerating,
}) => {
  const [showFeatures, setShowFeatures] = useState(false);
  const [showBusiness, setShowBusiness] = useState(false);
  const [showAtmosphere, setShowAtmosphere] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
  
  const businessRef = useRef<HTMLDivElement | null>(null);
  const atmosphereRef = useRef<HTMLDivElement | null>(null);
  const featuresRef = useRef<HTMLDivElement | null>(null);
  const generateRef = useRef<HTMLButtonElement | null>(null);
  
  const {
    featuresDropdownUp,
    setFeaturesDropdownUp,
    businessDropdownUp,
    setBusinessDropdownUp,
    atmosphereDropdownUp,
    setAtmosphereDropdownUp,
    checkDropdownPosition
  } = useDropdownPosition();

  const businessOptions = ["瑜伽", "SPA", "台球", "健身房"];
  const atmosphereOptions = ["阴天氛围", "上午氛围", "正午氛围", "傍晚氛围", "夜晚氛围"];

  // 标签数据
  const tabItems = [
    { id: "image", label: "图片生成" },
    { id: "video", label: "视频生成" },
    { id: "migration", label: "图像迁移" },
    { id: "action", label: "图片编辑" },
    { id: "digital", label: "高清放大" }
  ];

  // 检测移动端
  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth <= 768);
    };
    
    checkMobile();
    window.addEventListener('resize', checkMobile);
    
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  // 关闭下拉（点击外部 / ESC）
  useEffect(() => {
    function handleDown(e: MouseEvent) {
      if (
        businessRef.current &&
        !businessRef.current.contains(e.target as Node)
      ) {
        setShowBusiness(false);
      }
      if (
        featuresRef.current &&
        !featuresRef.current.contains(e.target as Node)
      ) {
        setShowFeatures(false);
      }
    }
    function handleKey(e: KeyboardEvent) {
      if (e.key === "Escape") {
        setShowBusiness(false);
        setShowFeatures(false);
      }
    }
    document.addEventListener("mousedown", handleDown);
    document.addEventListener("keydown", handleKey);
    return () => {
      document.removeEventListener("mousedown", handleDown);
      document.removeEventListener("keydown", handleKey);
    };
  }, []);

  // 监听窗口大小变化，重新计算下拉框位置
  useEffect(() => {
    const handleResize = () => {
      if (showFeatures) {
        checkDropdownPosition(featuresRef, setFeaturesDropdownUp);
      }
      if (showBusiness) {
        checkDropdownPosition(businessRef, setBusinessDropdownUp);
      }
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [showFeatures, showBusiness, checkDropdownPosition, setFeaturesDropdownUp, setBusinessDropdownUp]);

  // 发送按钮点击处理
  const handleSendClick = () => {
    // 检查登录状态
    if (!isAuthenticated) {
      setShowLoginModal(true);
      return;
    }
    
    onGenerate();
  };

  if (isMobile) {
    return (
      <div className="toolbar-right">
        <button
          className="lv-btn lv-btn-primary lv-btn-size-default lv-btn-shape-circle lv-btn-icon-only button-wtoV7J submit-button-VW0U_J"
          type="button"
          onClick={handleSendClick}
          ref={generateRef}
          disabled={isGenerating}
        >
          <div style={{width: '36px', height: '36px', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
            {isGenerating ? (
              <div className="loading-spinner" style={{
                width: '20px',
                height: '20px',
                border: '2px solid #f3f3f3',
                borderTop: '2px solid #3498db',
                borderRadius: '50%',
                animation: 'spin 1s linear infinite'
              }}></div>
            ) : (
              <svg
                width="1em"
                height="1em"
                viewBox="0 0 24 24"
                preserveAspectRatio="xMidYMid meet"
                fill="none"
                role="presentation"
                xmlns="http://www.w3.org/2000/svg"
                className=""
              >
                <g>
                  <path
                    data-follow-fill="currentColor"
                    d="M12.002 3c.424 0 .806.177 1.079.46l5.98 5.98.103.114a1.5 1.5 0 0 1-2.225 2.006l-3.437-3.436V19.5l-.008.153a1.5 1.5 0 0 1-2.985 0l-.007-.153V8.122l-3.44 3.438a1.5 1.5 0 0 1-2.225-2.006l.103-.115 6-5.999.025-.025.059-.052.044-.037c.029-.023.06-.044.09-.065l.014-.01a1.43 1.43 0 0 1 .101-.062l.03-.017c.209-.11.447-.172.699-.172Z"
                    fill="currentColor"
                  ></path>
                </g>
              </svg>
            )}
          </div>
        </button>
      </div>
    );
  }

  return (
    <>
      <div className="toolbar-left">
        <div className="dropdown" ref={featuresRef}>
          <button
            className={`tool-chip ${activeType ? 'features-active' : ''}`}
            onClick={() => {
              if (!showFeatures) {
                checkDropdownPosition(featuresRef, setFeaturesDropdownUp);
              }
              setShowFeatures(!showFeatures);
            }}
          >
            {activeType === "image" ? (selectedFeature === "手写提示词" ? "手写提示词" : selectedFeature === "风格参考" ? "风格参考" : "图片生成") : 
             activeType === "video" ? "视频生成" : 
             activeType === "migration" ? "图像迁移" :
             activeType === "action" ? (selectedFeature === "图片编辑" ? "图片编辑" : selectedFeature) :
             activeType === "digital" ? "高清放大" : selectedFeature}
            <svg
              width="1em"
              height="1em"
              viewBox="0 0 24 24"
              preserveAspectRatio="xMidYMid meet"
              fill="none"
              role="presentation"
              xmlns="http://www.w3.org/2000/svg"
              className={`caret ${showFeatures ? "open" : ""}`}
            >
              <g>
                <path
                  data-follow-fill="currentColor"
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M21.01 7.982A1.2 1.2 0 0 1 21 9.679l-8.156 8.06a1.2 1.2 0 0 1-1.688 0L3 9.68a1.2 1.2 0 0 1 1.687-1.707L12 15.199l7.313-7.227a1.2 1.2 0 0 1 1.697.01Z"
                  fill="currentColor"
                />
              </g>
            </svg>
          </button>
          <div
            className={`dropdown-menu fade ${
              showFeatures ? "show" : "hide"
            } ${featuresDropdownUp ? "dropdown-up" : ""}`}
          >
            {/* 功能类型选择 */}
            <div className="dropdown-section">
              <div className="dropdown-section-title">功能类型</div>
              {tabItems.map((item) => (
                <div
                  key={item.id}
                  className={`dropdown-item ${
                    activeType === item.id ? "selected" : ""
                  }`}
                  role="option"
                  aria-selected={activeType === item.id}
                  onClick={() => {
                    setActiveType(item.id as "image" | "video" | "migration" | "digital" | "action");
                    // 更新 selectedFeature 以匹配 activeType
                    if (item.id === "image") {
                      setSelectedFeature("手写提示词"); // 默认选择手写提示词
                      // 图片生成不关闭下拉框，保持展开状态以显示功能选项
                    } else if (item.id === "video") {
                      setSelectedFeature("视频生成");
                      setShowFeatures(false); // 关闭下拉框
                    } else if (item.id === "migration") {
                      setSelectedFeature("图像迁移");
                      setShowFeatures(false); // 关闭下拉框
                    } else if (item.id === "digital") {
                      setSelectedFeature("高清放大");
                      setShowFeatures(false); // 关闭下拉框
                    } else if (item.id === "action") {
                      setSelectedFeature("单图指令编辑");
                      // 图片编辑不关闭下拉框，保持展开状态以显示功能选项
                    }
                  }}
                >
                  <span className="item-label">{item.label}</span>
                  {activeType === item.id && <span className="item-check">✓</span>}
                </div>
              ))}
            </div>
            
            {/* 功能选项 - 在图片生成和图片编辑时显示 */}
            {(activeType === "image" || activeType === "action") && (
              <>
                {/* 分隔线 */}
                <div className="dropdown-divider"></div>
              <div className="dropdown-section">
                <div className="dropdown-section-title">功能选项</div>
                
                {/* 图片生成的功能选项 */}
                {activeType === "image" && (
                  <>
                    <div
                      className={`dropdown-item ${
                        selectedFeature === "手写提示词" ? "selected" : ""
                      }`}
                      role="option"
                      aria-selected={selectedFeature === "手写提示词"}
                      onClick={() => {
                        setSelectedFeature("手写提示词");
                        setShowFeatures(false);
                      }}
                    >
                      <span className="item-label">手写提示词</span>
                      {selectedFeature === "手写提示词" && <span className="item-check">✓</span>}
                    </div>
                    <div
                      className={`dropdown-item ${
                        selectedFeature === "风格参考" ? "selected" : ""
                      }`}
                      role="option"
                      aria-selected={selectedFeature === "风格参考"}
                      onClick={() => {
                        setSelectedFeature("风格参考");
                        setShowFeatures(false);
                      }}
                    >
                      <span className="item-label">风格参考</span>
                      {selectedFeature === "风格参考" && <span className="item-check">✓</span>}
                    </div>
                  </>
                )}
                
                {/* 图片编辑的功能选项 */}
                {activeType === "action" && (
                  <>
                    <div
                      className={`dropdown-item ${
                        selectedFeature === "单图指令编辑" ? "selected" : ""
                      }`}
                      role="option"
                      aria-selected={selectedFeature === "单图指令编辑"}
                      onClick={() => {
                        setSelectedFeature("单图指令编辑");
                        setShowFeatures(false);
                      }}
                    >
                      <span className="item-label">单图指令编辑</span>
                      {selectedFeature === "单图指令编辑" && <span className="item-check">✓</span>}
                    </div>
                    <div
                      className={`dropdown-item ${
                        selectedFeature === "双图编辑参考风格" ? "selected" : ""
                      }`}
                      role="option"
                      aria-selected={selectedFeature === "双图编辑参考风格"}
                      onClick={() => {
                        setSelectedFeature("双图编辑参考风格");
                        setShowFeatures(false);
                      }}
                    >
                      <span className="item-label">双图编辑参考风格</span>
                      {selectedFeature === "双图编辑参考风格" && <span className="item-check">✓</span>}
                    </div>
                    <div
                      className={`dropdown-item ${
                        selectedFeature === "双图指令编辑" ? "selected" : ""
                      }`}
                      role="option"
                      aria-selected={selectedFeature === "双图指令编辑"}
                      onClick={() => {
                        setSelectedFeature("双图指令编辑");
                        setShowFeatures(false);
                      }}
                    >
                      <span className="item-label">双图指令编辑</span>
                      {selectedFeature === "双图指令编辑" && <span className="item-check">✓</span>}
                    </div>
                    <div
                      className={`dropdown-item ${
                        selectedFeature === "光线氛围" ? "selected" : ""
                      }`}
                      role="option"
                      aria-selected={selectedFeature === "光线氛围"}
                      onClick={() => {
                        setSelectedFeature("光线氛围");
                        setShowFeatures(false);
                      }}
                    >
                      <span className="item-label">光线氛围</span>
                      {selectedFeature === "光线氛围" && <span className="item-check">✓</span>}
                    </div>
                  </>
                )}
              </div>
              </>
            )}
          </div>
        </div>
        {activeType !== "digital" && activeType !== "migration" && activeType !== "video" && 
         !(activeType === "action" && (selectedFeature === "单图指令编辑" || selectedFeature === "双图编辑参考风格" || selectedFeature === "光线氛围" || selectedFeature === "双图指令编辑")) && (
          <div className="dropdown" ref={businessRef}>
            <button
              className={`tool-chip ${selectedBusiness && selectedBusiness !== '选择业态' && selectedBusiness !== '业态选择' ? 'business-active' : ''}`}
              onClick={() => {
                if (!showBusiness) {
                  checkDropdownPosition(businessRef, setBusinessDropdownUp);
                }
                setShowBusiness((v) => !v);
              }}
            >
              {selectedBusiness}
              <svg
                width="1em"
                height="1em"
                viewBox="0 0 24 24"
                preserveAspectRatio="xMidYMid meet"
                fill="none"
                role="presentation"
                xmlns="http://www.w3.org/2000/svg"
                className={`caret ${showBusiness ? "open" : ""}`}
              >
                <g>
                  <path
                    data-follow-fill="currentColor"
                    fillRule="evenodd"
                    clipRule="evenodd"
                    d="M21.01 7.982A1.2 1.2 0 0 1 21 9.679l-8.156 8.06a1.2 1.2 0 0 1-1.688 0L3 9.68a1.2 1.2 0 0 1 1.687-1.707L12 15.199l7.313-7.227a1.2 1.2 0 0 1 1.697.01Z"
                    fill="currentColor"
                  />
                </g>
              </svg>
            </button>
            <div
              className={`dropdown-menu fade ${
                showBusiness ? "show" : "hide"
              } ${businessDropdownUp ? "dropdown-up" : ""}`}
            >
              {businessOptions.map((opt) => {
                const selected = selectedBusiness === opt;
                return (
                  <div
                    key={opt}
                    className={`dropdown-item ${
                      selected ? "selected" : ""
                    }`}
                    role="option"
                    aria-selected={selected}
                    onClick={() => {
                      setSelectedBusiness(opt);
                      setShowBusiness(false);
                    }}
                  >
                    <span className="item-label">{opt}</span>
                    {selected && <span className="item-check">✓</span>}
                  </div>
                );
              })}
            </div>
          </div>
        )}
        
        {/* 氛围选择下拉框 - 仅在光线氛围模式下显示 */}
        {activeType === "action" && selectedFeature === "光线氛围" && (
          <div className="dropdown" ref={atmosphereRef}>
            <button
              className={`tool-chip ${selectedAtmosphere ? 'atmosphere-active' : ''}`}
              onClick={() => {
                if (!showAtmosphere) {
                  checkDropdownPosition(atmosphereRef, setAtmosphereDropdownUp);
                }
                setShowAtmosphere((v) => !v);
              }}
            >
              {selectedAtmosphere}
              <svg
                width="12"
                height="12"
                viewBox="0 0 12 12"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M3 4.5L6 7.5L9 4.5"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </button>
            <div
              className={`dropdown-menu fade ${
                showAtmosphere ? "show" : "hide"
              } ${atmosphereDropdownUp ? "dropdown-up" : ""}`}
            >
              {atmosphereOptions.map((atmosphere) => (
                <div
                  key={atmosphere}
                  className={`dropdown-item ${
                    selectedAtmosphere === atmosphere ? "selected" : ""
                  }`}
                  onClick={() => {
                    setSelectedAtmosphere(atmosphere);
                    setShowAtmosphere(false);
                  }}
                >
                  <span className="item-label">{atmosphere}</span>
                  {selectedAtmosphere === atmosphere && <span className="item-check">✓</span>}
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
      <div className="toolbar-right">
        <button 
          className="deepseek-btn"
          onClick={() => onOpenLLM?.()}
          title="打开 AI 助手"
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            preserveAspectRatio="xMidYMid meet"
            fill="none"
            role="presentation"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g>
              <path
                data-follow-fill="currentColor"
                d="M22.28 5.447c-.223-.111-.32.1-.449.208-.044.035-.082.08-.12.121C20.1 7.531 17.2 6.881 16.478 4.61l-.054-.17c-.048-.142-.096-.287-.256-.312-.175-.027-.243.122-.312.247-.274.51-.38 1.072-.37 1.64.024 1.281.555 2.301 1.609 3.026.12.084.15.167.113.288-.072.25-.158.493-.233.743-.048.16-.12.194-.288.125a4.84 4.84 0 0 1-1.52-1.052c-.748-.739-1.426-1.554-2.271-2.192a9.995 9.995 0 0 0-.603-.42c-.862-.854.113-1.555.34-1.638.235-.087.081-.385-.682-.382-.763.004-1.461.264-2.35.611a2.66 2.66 0 0 1-.408.122 8.245 8.245 0 0 0-2.522-.09c-1.65.187-2.967.981-3.936 2.338-1.163 1.63-1.437 3.483-1.102 5.416.352 2.037 1.373 3.723 2.94 5.041 1.625 1.367 3.497 2.037 5.633 1.909 1.297-.077 2.74-.254 4.37-1.659.41.208.842.291 1.557.354.551.052 1.082-.028 1.492-.115.643-.138.599-.746.366-.857-1.885-.895-1.471-.53-1.848-.825.959-1.156 2.403-2.356 2.967-6.246.045-.308.007-.503 0-.752-.003-.153.03-.212.202-.23a3.588 3.588 0 0 0 1.352-.423c1.222-.68 1.715-1.797 1.831-3.136.018-.205-.003-.417-.216-.524ZM11.632 17.5c-1.827-1.464-2.714-1.946-3.08-1.925-.342.02-.28.42-.206.68.079.256.182.433.326.659.099.149.167.371-.1.538-.588.37-1.611-.125-1.66-.15-1.19-.714-2.186-1.658-2.888-2.949a9.134 9.134 0 0 1-1.136-3.997c-.017-.343.082-.465.417-.527a4.046 4.046 0 0 1 1.339-.035c1.865.278 3.453 1.128 4.784 2.474.76.767 1.335 1.683 1.927 2.578.63.95 1.307 1.856 2.17 2.599.304.26.547.458.78.603-.702.08-1.873.098-2.673-.548Z"
                fill="currentColor"
              ></path>
            </g>
          </svg>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="46"
            height="16"
            viewBox="0 0 46 16"
            fill="none"
          >
            <path
              d="M0.335938 12.0003L1.48794 3.80431H2.89194C4.39194 3.80431 7.76394 4.1643 7.22394 7.98031C6.69594 11.7123 3.25194 12.0003 1.75194 12.0003H0.335938ZM1.90794 11.6763C3.77994 11.5683 5.07594 10.1403 5.39994 7.83631C5.71194 5.60431 4.83594 4.24831 2.98794 4.12831L1.90794 11.6763Z"
              fill="currentColor"
            ></path>
            <path
              d="M9.00416 9.37231C8.78816 10.9683 9.16016 11.9043 10.0242 11.9043C10.5042 11.9043 11.0562 11.6763 11.3802 11.3883L11.4762 11.5323C10.9602 11.9883 10.3242 12.1923 9.61616 12.1923C8.09216 12.1923 7.33616 11.0523 7.60016 9.16831C7.85216 7.36831 8.92016 6.30031 10.4082 6.30031C11.7642 6.30031 12.6642 7.0563 12.4362 8.04031C12.2922 8.67631 11.4762 9.37231 9.00416 9.37231ZM10.5402 6.49231C9.84416 6.49231 9.24416 7.7403 9.02816 9.19231C10.3602 9.19231 11.0682 8.60431 11.1762 8.04031C11.3322 7.1883 11.0922 6.49231 10.5402 6.49231Z"
              fill="currentColor"
            ></path>
            <path
              d="M14.2073 9.37231C13.9913 10.9683 14.3633 11.9043 15.2273 11.9043C15.7073 11.9043 16.2593 11.6763 16.5833 11.3883L16.6793 11.5323C16.1633 11.9883 15.5273 12.1923 14.8193 12.1923C13.2953 12.1923 12.5393 11.0523 12.8033 9.16831C13.0553 7.36831 14.1233 6.30031 15.6113 6.30031C16.9673 6.30031 17.8673 7.0563 17.6393 8.04031C17.4953 8.67631 16.6793 9.37231 14.2073 9.37231ZM15.7433 6.49231C15.0473 6.49231 14.4473 7.7403 14.2313 9.19231C15.5633 9.19231 16.2713 8.60431 16.3793 8.04031C16.5353 7.1883 16.2953 6.49231 15.7433 6.49231Z"
              fill="currentColor"
            ></path>
            <path
              d="M17.6704 14.8203L18.8704 6.30031H20.3224L20.2384 6.81631C20.6224 6.48031 21.0544 6.30031 21.4384 6.30031C23.0104 6.30031 23.7064 7.36831 23.4304 9.32431C23.1544 11.2563 22.3144 12.1923 20.8144 12.1923C20.2744 12.1923 19.8544 12.0003 19.5664 11.6883L19.1224 14.8203H17.6704ZM19.6144 11.2203C19.9384 11.7483 20.2144 11.9163 20.6104 11.9163C21.1024 11.9163 21.5464 10.9563 21.7984 9.18031C22.0384 7.47631 21.8344 6.61231 21.2224 6.61231C20.9464 6.61231 20.6464 6.85231 20.1544 7.44031L19.6144 11.2203Z"
              fill="currentColor"
            ></path>
            <path
              d="M24.6159 5.67631C24.7959 4.39231 25.8399 3.6123 27.3759 3.6123C28.5399 3.6123 29.2959 4.1043 29.5719 4.92031L29.5359 4.8843L29.3559 4.95631C28.8999 4.34431 28.3119 3.96031 27.6639 3.96031C26.9559 3.96031 26.3199 4.63231 26.1999 5.50831C26.0559 6.51631 26.7039 7.02031 27.3639 7.56031C28.1319 8.12431 29.2479 9.13231 29.1039 10.1883C28.8999 11.6523 27.3279 12.1803 26.1279 12.1803C25.0239 12.1803 24.1959 11.6403 23.9199 10.8723L23.9559 10.9083L24.1599 10.8243C24.6279 11.4363 25.2759 11.8443 25.8399 11.8443C26.7879 11.8443 27.2799 11.4003 27.4119 10.4523C27.5079 9.74431 27.0879 9.04831 26.2359 8.38831C25.4439 7.83631 24.4239 7.0563 24.6159 5.67631Z"
              fill="currentColor"
            ></path>
            <path
              d="M31.1877 9.37231C30.9718 10.9683 31.3438 11.9043 32.2078 11.9043C32.6878 11.9043 33.2397 11.6763 33.5638 11.3883L33.6598 11.5323C33.1438 11.9883 32.5077 12.1923 31.7997 12.1923C30.2757 12.1923 29.5198 11.0523 29.7838 9.16831C30.0358 7.36831 31.1038 6.30031 32.5918 6.30031C33.9478 6.30031 34.8478 7.0563 34.6198 8.04031C34.4757 8.67631 33.6598 9.37231 31.1877 9.37231ZM32.7238 6.49231C32.0278 6.49231 31.4277 7.7403 31.2118 9.19231C32.5438 9.19231 33.2517 8.60431 33.3597 8.04031C33.5157 7.1883 33.2757 6.49231 32.7238 6.49231Z"
              fill="currentColor"
            ></path>
            <path
              d="M36.3909 9.37231C36.1749 10.9683 36.5469 11.9043 37.4109 11.9043C37.8909 11.9043 38.4429 11.6763 38.7669 11.3883L38.8629 11.5323C38.3469 11.9883 37.7109 12.1923 37.0029 12.1923C35.4789 12.1923 34.7229 11.0523 34.9869 9.16831C35.2389 7.36831 36.3069 6.30031 37.7949 6.30031C39.1509 6.30031 40.0509 7.0563 39.8229 8.04031C39.6789 8.67631 38.8629 9.37231 36.3909 9.37231ZM37.9269 6.49231C37.2309 6.49231 36.6309 7.7403 36.4149 9.19231C37.7469 9.19231 38.4549 8.60431 38.5629 8.04031C38.7189 7.1883 38.4789 6.49231 37.9269 6.49231Z"
              fill="currentColor"
            ></path>
            <path
              d="M40.238 12.0003L41.39 3.80431H42.926L42.206 8.90431L45.062 6.21631L45.314 6.49231L43.586 8.17231L44.882 12.0003H43.25L42.374 9.30031L42.122 9.52831L41.774 12.0003H40.238Z"
              fill="currentColor"
            ></path>
          </svg>
        </button>
        <button
          className="lv-btn lv-btn-primary lv-btn-size-default lv-btn-shape-circle lv-btn-icon-only button-wtoV7J submit-button-VW0U_J"
          type="button"
          onClick={handleSendClick}
          ref={generateRef}
          disabled={isGenerating}
        >
          <div style={{width: '36px', height: '36px', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
            {isGenerating ? (
              <div className="loading-spinner" style={{
                width: '20px',
                height: '20px',
                border: '2px solid #f3f3f3',
                borderTop: '2px solid #3498db',
                borderRadius: '50%',
                animation: 'spin 1s linear infinite'
              }}></div>
            ) : (
              <svg
                width="1em"
                height="1em"
                viewBox="0 0 24 24"
                preserveAspectRatio="xMidYMid meet"
                fill="none"
                role="presentation"
                xmlns="http://www.w3.org/2000/svg"
                className=""
              >
                <g>
                  <path
                    data-follow-fill="currentColor"
                    d="M12.002 3c.424 0 .806.177 1.079.46l5.98 5.98.103.114a1.5 1.5 0 0 1-2.225 2.006l-3.437-3.436V19.5l-.008.153a1.5 1.5 0 0 1-2.985 0l-.007-.153V8.122l-3.44 3.438a1.5 1.5 0 0 1-2.225-2.006l.103-.115 6-5.999.025-.025.059-.052.044-.037c.029-.023.06-.044.09-.065l.014-.01a1.43 1.43 0 0 1 .101-.062l.03-.017c.209-.11.447-.172.699-.172Z"
                    fill="currentColor"
                  ></path>
                </g>
              </svg>
            )}
          </div>
        </button>
      </div>
    </>
  );
};

export default Toolbar;
